<template>
	<a-spin :spinning='loading'>
		<a-card>
			<section slot='title'>商品列表</section>

			<a-row :gutter='16'>
        <a-col :span='5'>
          <span class='label'>ID：</span>
          <a-input :max-length='100' allow-clear v-model='pid' placeholder='请输入商品名称' />
        </a-col>
				<a-col :span='5'>
					<span class='label'>商品名称：</span>
					<a-input :max-length='100' allow-clear v-model='name' placeholder='请输入商品名称' />
				</a-col>

				<!-- <a-col :span="5">
          <span class="label">店铺：</span>
          <a-select v-model="status" class="w-full" allow-clear placeholder="请选择店铺状态">
            <a-select-option :value="1">禁用</a-select-option>
            <a-select-option :value="2">启用</a-select-option>
          </a-select>
        </a-col> -->
				<!-- <a-col :span="5">
          <span class="label">创建日期：</span>
          <a-range-picker  v-model="createTime" class="w-full" placeholder="请选择创建日期" />
        </a-col> -->
				<a-col :span='5'>
					<span class='label'>状态：</span>
					<a-select v-model='status' class='w-full' allow-clear placeholder='请选择状态'>
						<a-select-option v-for='item in orderStatusEnums' :value='item.value' :key='item.value'>{{
                item.name
              }}
						</a-select-option>
					</a-select>
				</a-col>

				<a-col :span='8'>
					<a-button class='ml-18' type='primary' @click='search'>查询</a-button>
					<a-button class='mx-8' @click='reset'>重置</a-button>
					<a-button @click='getEdit' class='mx-8' type='primary'>新增</a-button>
					<a-button type='primary' ghost class='ml-10 border-5' @click='exportTable'>导出</a-button>
				</a-col>
			</a-row>
			<a-table class='mt-16 order-table' :columns='columns' :data-source='data' :scroll='scroll'
				:pagination='pagination'>
				<!-- <template #status="status, data">
          {{ data.status == 1 ? '成功' : '失败' }}
        </template> -->
				<template #showUrl='showUrl, data'>
					<PreviewImage v-if='data.showUrl' :value='getPhotos(data.showUrl)' />
				</template>
				<template #firstCategoryId='firstCategoryId, data'>
					{{ data.firstCategoryName }},{{ data.secondCategoryName }}
				</template>
				<template #createTime='createTime, data'>
					{{ $utils.formatTimestamp(data.createTime) }}
				</template>
				<template #status='status, data'>
					{{ data.status == 1 ? '上架' : '下架' }}
				</template>

				<template #action='action, data'>
					<div class='flex items-center justify-between'>
						<a-button @click='getEdit(data)' class='mr-10' type='primary'>
							编辑
						</a-button>
						<!-- <a-button @click='goCharts(data)' style='background: 	#32CD32;' type='primary'>
							查看
						</a-button> -->
						<a-button @click='delect(data)' class='ml-10 mr-10' type='danger'>
							删除
						</a-button>
						<!-- <a-button style="background-color: #FFD700;" type="primary">
              重置
            </a-button> -->
					</div>
				</template>

			</a-table>
			<!-- <a-divider  /> -->
		</a-card>
		<particulars ref='particulars'></particulars>
		<create @upload='upload' ref='create' type='0'></create>
	</a-spin>
</template>
<script>
	import create from '../components/create.vue'
	import particulars from '../components/particulars'
	import {
		getSpuPage,
		getSpuDelete
	} from '@/api/newPet'
	import {
		tableMixins
	} from '@/utils/mixins'

	export default {
		mixins: [tableMixins],
		components: {
			particulars,
			create
		},
		data() {
			return {
				loading: false,
				tabs: 'select1',
				orderId: undefined,
				createTime: [undefined, undefined],
				status: undefined,
        name:'',
        pid:'',
				orderStatusEnums: [{
						value: 0,
						name: '下架'
					},
					{
						value: 1,
						name: '上架'
					}
				],
				data: [],
				columns: [{
						title: '序号',
						dataIndex: 'sortNumb',
						align: 'center',
						width: 140,
						scopedSlots: {
							customRender: 'sortNumb'
						}
					},
					{
						title: '商品ID',
						dataIndex: 'id',
						align: 'center',
						width: 140,
						scopedSlots: {
							customRender: 'id'
						}
					},
					{
						title: '商品名称',
						dataIndex: 'name',
						width: 120,
						align: 'center',
						scopedSlots: {
							customRender: 'name'
						}
					},
					{
						title: '商品图片',
						dataIndex: 'showUrl',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'showUrl'
						}
					},
					{
						title: '商品分类',
						dataIndex: 'firstCategoryId',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'firstCategoryId'
						}
					},
					{
						title: '上架时间',
						dataIndex: 'createTime',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'createTime'
						}
					},
					{
						title: '状态',
						dataIndex: 'status',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'status'
						}
					},
					{
						title: '可售库存',
						dataIndex: 'stock',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'stock'
						}
					},
					{
						title: '销量',
						dataIndex: 'salesCount',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'salesCount'
						}
					},
					{
						title: '操作',
						fixed: 'right',
						dataIndex: 'action',
						width: 160,
						scopedSlots: {
							customRender: 'action'
						},
						align: 'center'
					}
				]

			}
		},
		computed: {},
		watch: {},
		async created() {

		},
		mounted() {
			this.search()
		},
		methods: {
			search() {
				this.pageNum = 1

				this.getData()
			},
			getPhotos(img) {

				return img.split(',')
			},
			upload() {
				this.search()
			},
			delect(data) {
				this.$confirm({
					title: '删除',
					content: `请确认是否删除该条信息`,
					okText: '确定',
					okType: 'danger',
					cancelText: '取消',
					onOk: () => {

						this.loading = true
						getSpuDelete({
								id: data.id
							})
							.then((res) => {
								this.$message.success('删除成功！')

								this.search()

								this.loading = false
							})
							.finally(() => (this.loading = false))

					}
				})
			},
			goCharts(data) {
				this.$refs.create.open(data)
				// this.$refs.particulars.open()
			},
			getEdit(data) {
				this.$refs.create.open(data)
			},
			getSearchParams() {

				return {
					pageNo: this.pageNum,
					pageSize: this.rowsNum,
					name: this.name,
					id: this.pid,
					status: this.status,
					type: 0

				}
			},
			getData() {
				this.loading = true
				getSpuPage(this.getSearchParams()).then(data => {

          for (let i = 0; i < data.list.length; i++) {
            data.list[i].showUrl = data.list[i].picUrl.split(',')[0]
          }
					this.total = data.total
					this.data = data.list
				}).finally(() => this.loading = false)
			},
			reset() {
				this.createTime = [undefined, undefined]
				this.name = ''
				this.pid = ''
				this.status = ''
			}
		}
	}
</script>
<style lang='less' scoped>
	.ant-col {
		margin-bottom: 20px;
		display: flex;
		align-items: center;

		.label {
			flex-shrink: 0;
			width: 86px;
			text-align: right;
			font-size: 14px;
			color: #595959;
		}

		.w-full {
			flex: 1;
		}
	}
</style>